<template>
  <p class="fen">数据分析系统：销售量</p>
  <!-- 经营概况表 -->
  <el-row :gutter="20" style="height: 120px">
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>营业额总计:¥2134243</span></div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>今日:¥123231</span></div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>昨日:¥16267</span></div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>会员消费:¥65212</span></div></el-col
    >
  </el-row>
  <p class="fen1">热销菜品</p>
  <el-row :gutter="20" style="height: 120px">
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>红烧牛肉:123份</span></div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>青椒炒蛋:232份</span></div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>红烧肉:112份</span></div></el-col
    >
    <el-col :span="6"
      ><div class="grid-content ep-bg-purple"><span>烤肉:156份</span></div></el-col
    >
  </el-row>

  <!-- 时间 -->
  <div class="demo-datetime-picker">
    <!-- 左边 -->
    <span>周期选择：</span>
    <div class="block">
      <span class="demonstration">起始：</span>
      <el-date-picker v-model="value1" type="datetime" placeholder="请选择起始时间" />
    </div>
    <!-- 右边 -->
    <div class="block">
      <span class="demonstration">截止：</span>
      <el-date-picker v-model="value2" type="datetime" placeholder="请选择截止时间 " :shortcuts="shortcuts" />
    </div>

    <button class="butt">确定</button>
  </div>

  <!-- 图标 -->
  <el-row :gutter="20" style="margin-top: 10px">
    <el-col :span="12"
      ><div class="grid-content ep-bg-purple" style="background: #fff; width: 100%; height: 100%">
        <div id="xian"></div></div
    ></el-col>
    <el-col :span="12"
      ><div class="grid-content ep-bg-purple" style="background: #fff; width: 100%; height: 100%">
        <div id="dian"></div></div
    ></el-col>
  </el-row>
</template>

<script setup>
// 时间
import * as echarts from 'echarts'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

// echarts图表
// 线
let myChart
const TuBiao = () => {
  var chartDom = document.getElementById('xian')
  myChart = echarts.init(chartDom)
  var option
  // 监听窗口变化
  // window.onresize = function () {
  //   myChart.resize()
  //   router.go(0)
  // }

  window.addEventListener('resize', () => {
    if (myChart) {
      myChart.resize()
    }
  })
  option = {
    xAxis: {
      type: 'category',
      data: ['红烧牛肉', '青椒炒蛋', '红烧肉', '烤肉'],
    },

    yAxis: [
      {
        type: 'value',
      },
    ],

    series: [
      {
        data: [105, 194, 80, 90],
        type: 'bar',
        barWidth: 70, // 柱子宽度
        itemStyle: {
          color: function (params) {
            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            var colorList = ['rgb(178, 201, 246)', '#bcf096', 'rgb(255, 232, 177)', 'rgb(250, 190, 190)']
            return colorList[params.dataIndex]
          },
        },
      },
    ],
  }

  option && myChart.setOption(option)
}
// 点
const TuBiao1 = () => {
  var chartDom = document.getElementById('dian')
  myChart = echarts.init(chartDom)
  var option
  // 监听窗口变化
  // window.onresize = function () {
  //   myChart.resize()
  //   // router.go(0)
  // }
  window.addEventListener('resize', () => {
    if (myChart) {
      myChart.resize()
    }
  })
  option = {
    title: {
      // text: '金额/万',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: '8%',
      data: ['销售额', '盈利'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      // boundaryGap: false,
      data: ['5.3', '5.4', '5.5', '5.6', '5.7', '5.8', '5.9'],
      boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolSize: [15, 30],
      },
    },
    yAxis: {
      type: 'value',
      name: '金额/万',
      nameGap: '11',
      splitNumber: 3,
      boundaryGap: ['20%', '20%'],
      axisTick: {
        show: true, // 是否显示坐标轴刻度
        inside: true, // 坐标轴刻度是否朝内，默认朝外
        length: 20, // 坐标轴刻度的长度
      },
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
        symbolSize: [15, 30],
      },
      axisLabel: {
        lineHeight: '10',
      },
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        stack: 'Total',
        data: [231, 185, 221, 158, 200, 178, 210],
      },
      {
        name: '盈利',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 154, 174, 170, 190],
      },
    ],
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  TuBiao()
  TuBiao1()
})
// onBeforeUnmount(() => {
//   myChart.dispose()
//   console.log(21111)
// })
</script>

<style lang="less" scoped>
.fen {
  font-size: 16px;
  height: 30px;
}
.fen1 {
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  margin-top: -5px;
}
/* // 经营概况表 */
.el-row {
  margin-bottom: 10px;
  background-color: #f5f5f5;
  height: 120px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;

  span {
    font-size: 16px;
    line-height: 120px;
    text-align: center;
    margin-left: 20px;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
/* // 时间 */
.demo-datetime-picker {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 82px;
  background-color: #d4fd9eaf;
  line-height: 82px;
  overflow: hidden;

  span {
    font-size: 16px;
    .block {
      .demonstration {
        font-family: 'STHeiti';
        font-weight: 400;
      }
    }
  }
  .butt {
    height: 32px;
    width: 80px;
    background-color: #ffd00081;
    color: #f5f5f5;
    border: none;
  }
}
// 线图

#xian {
  width: 100%;

  height: 353px;
}
// 点图
#dian {
  width: 100%;

  height: 353px;
}
</style>
